<template>
  <div class="role">
    <PageSearch :formConfig="formConfig" />
  </div>
  <div>
    <PageContent
      :contentTableConfig="contentTableConfig"
      pageName="role"
      @newBtn="newBtnClick"
      @editBtn="editBtnClick"
    ></PageContent>
    <PageModal
      ref="pageModelRef"
      :modalConfig="modalConfig"
      pageName="role"
      :defaultInfo="defaultInfo"
      :otherInfo="otherInfo"
    >
      <div class="menu-tree">
        <el-tree
          ref="elTreeRef"
          :data="menus"
          show-checkbox
          node-key="id"
          :props="{ children: 'children', label: 'name' }"
          @check="checkChange"
        >
        </el-tree>
      </div>
    </PageModal>
  </div>
</template>

<script lang="ts" setup>
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import { formConfig } from './config/FormConfig'
import { contentTableConfig } from './config/content.config'

import PageModal from '@/components/page-model'
import { modalConfig } from './config/model.config'

import { usePageModal } from '@/hooks/use-page-model'
import { getMenuLeafKeys } from '@/utils/map-menu'

import { useStore } from 'vuex'
import { ref, computed, nextTick } from 'vue'
import { ElTree } from 'element-plus'

const elTreeRef = ref<InstanceType<typeof ElTree>>()

const editCallback = (item: any) => {
  const leafKeys = getMenuLeafKeys(item.menuList)
  nextTick(() => {
    elTreeRef.value?.setCheckedKeys(leafKeys, false)
  })
}

const store = useStore()
const menus = computed(() => store.state.entireMenu)

  const pageModelRef = ref<InstanceType<typeof PageModel>>()
  const defaultInfo = ref({})
  const newBtnClick = () => {
    defaultInfo.value = {}
    if (pageModelRef.value) {
      pageModelRef.value.isShowDialog = true
    }
    // newCb && newCb()
  }
  const editBtnClick = (item: any) => {
    defaultInfo.value = { ...item }
    if (pageModelRef.value) {
      pageModelRef.value.isShowDialog = true
    }
    editCallback && editCallback(item)
  }
// const [pageModelRef, defaultInfo, newBtnClick, editBtnClick] = usePageModal(
//   undefined,
//   editCallback
// )

const otherInfo = ref({})
const checkChange = (data1: any, data2: any) => {
  const checkedKeys = data2.checkedKeys
  const halfCheckedKeys = data2.halfCheckedKeys
  const menuList = [...checkedKeys, ...halfCheckedKeys]
  otherInfo.value = { menuList }
}
</script>

<style scoped lang="less">
.menu-tree {
  margin-left: 150px;
}
</style>
